<template>
  <div class=''>
      <div>childB根组件</div>
      <div>user 的数据： {{$store.state.user.id}}</div>
      <div>user 的数据： {{id}}</div>
      <div>user 的数据： {{user.id}}</div>
<hr>
<button @click='changeId_'>click</button>
<button @click='changeId'>click</button>

<div>异步module</div>

<button @click='asyncID_'>click</button>
<button @click='asyncId__'>click</button>
<hr>

<div>{{filterId}}</div>

      <hr>
      <router-link to="/">childA</router-link>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: '',
  data () {
    return {

    }
  },
  watch: {

  },
  props: {
  },
  components: {

  },
  computed: {
      id() {
          return this.$store.state.user.id
      },

      ...mapState(['user']),

      ...mapGetters(['filterId'])
  },
  mounted() {

  },
  methods: {
      changeId_() {
          this.$store.commit('changeId')
      },

      ...mapMutations(['changeId']),

      asyncID_() {
          this.$store.dispatch('asyncId')
      },


      ...mapActions(['asyncId']),

      asyncId__ () {
           this['asyncId']()
       }
  },
  filters: {

  }
}
</script>

<style scoped lang='css'>

</style>